<div class="row" *ngIf="progress.isCompleted">
  <div class="col-3 pr-0 animated animated-delay-300 fadeInUp dpi-collect-app">
    <div class="card">
      <div class="card-header font-weight-bold p-2">
        <span class="fa fa-fw fa-adn"></span>通道信息
      </div>
      <div class="card-body p-1">
        <ul class="nav flex-column list-group">
          <ng-tools-table [table]="dvbConfiglTable" [pagination]="dvbConfigPage"></ng-tools-table>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-9 animated animated-delay-300 fadeInUp">
    <div class="card">
      <div class="card-header font-weight-bold p-2" *ngIf="!isUpdateConfig">
        <span class="fa fa-fw fa-info-circle"></span>通道详情
      </div>
      <div class="card-header font-weight-bold p-2" *ngIf="isUpdateConfig">
        <span class="fa fa-fw fa-info-circle"></span>通道配置
      </div>
      <div class="card-body p-1 outBox">
        <div *ngIf="!isUpdateConfig && isShowConfigDetail">
          <div class="card">
            <div class="card-header font-weight-bold p-2">
              <span class="fa fa-fw fa-info-circle"></span>基础配置
            </div>
            <div class="card-body p-1">
              <table class="table-h" cellspacing="0" cellpadding="5">
                <tr>
                  <th>名称:</th>
                  <td>{{currentDvbConfig.name}}</td>
                  <th>符号率:</th>
                  <td>{{currentDvbConfig.srate}}</td>
                  <th>频率:</th>
                  <td>{{currentDvbConfig.freq}}</td>
                </tr>
                <tr>
                  <th>调制器模式:</th>
                  <td>{{currentDvbConfig.delivery_system_display}}</td>
                  <th>码率:</th>
                  <td>{{currentDvbConfig.coderate_display}}</td>
                  <th>QAM类型:</th>
                  <td>{{currentDvbConfig.modulation_display}}</td>
                </tr>
                <tr>
                  <th>开启组播:</th>
                  <td>{{currentDvbConfig.multicast_ipv4_display}}</td>
                  <th>组播端口:</th>
                  <td>{{currentDvbConfig.common_port}}</td>
                  <th>组播ttl值:</th>
                  <td>{{currentDvbConfig.multicast_ttl}}</td>
                </tr>
              </table>
            </div>

          </div>

          <div class="card" *ngIf="currentDvbConfig.channels.length > 0">
            <div class="card-header font-weight-bold p-2">
              <span class="fa fa-fw fa-info-circle"></span>节目信息
            </div>
            <div class="card-body p-1">
              <table class="table-h" cellspacing="0" cellpadding="5">
                <!--{id: 1, name: "亳州新闻综合频道", ip: "224.2.1.1", service_id: 216, oscam: 1, port: 1234}-->
                <tr *ngFor="let channel of currentDvbConfig.channels">
                  <th>名称:</th>
                  <td>{{channel.name}}</td>
                  <th>IP:</th>
                  <td>{{channel.ip}}</td>
                  <th>服务ID:</th>
                  <td>{{channel.service_id}}</td>
                  <th>软解:</th>
                  <td>{{channel.oscam}}</td>
                  <th>端口:</th>
                  <td>{{channel.port}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <form *ngIf="isUpdateConfig" [formGroup]="dvbConfigForm">
          <!--// 基础配置-->
          <div class="card">
            <div class="card-header font-weight-bold p-2">
              <span class="fa fa-fw fa-info-circle"></span>基础配置
            </div>
            <div class="card-body p-1">
              <table class="table-h" cellspacing="0" cellpadding="5">
                <tr>
                  <th>调制器模式:</th>
                  <td>
                    <select title="" class="form-control form-control-sm"
                            formControlName="delivery_system">
                      <option>--请选择--</option>
                      <ng-container>
                        <option *ngFor="let group of deliverySystem" [value]="group.value">{{group.name}}</option>
                      </ng-container>
                    </select>
                  </td>
                  <th>符号率:</th>
                  <td><div><input type="text" class="form-control float-left col-10 form-control-sm" formControlName="srate" id="srate"><span class="float-left center-vertical">KHZ</span></div></td>
                  <th>频率:</th>
                  <td>
                    <div>
                    <select title="" class="form-control form-control-sm col-10 float-left" (change)="selectCurrentFreqFestival()"
                            formControlName="freq">
                      <option>--请选择--</option>
                      <ng-container>
                        <option *ngFor="let freq of freqs" [value]="freq">{{freq}}</option>
                      </ng-container>
                    </select><span class="float-left text-center">KHZ</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>调谐器:</th>
                  <td><select title="" class="form-control form-control-sm"
                              formControlName="tuner">
                    <option>--请选择--</option>
                    <ng-container>
                      <option *ngFor="let tunerItem of tuner" [value]="tunerItem.value">{{tunerItem.name}}</option>
                    </ng-container>
                  </select></td>
                  <th>码率:</th>
                  <td><select title="" class="form-control form-control-sm"
                              formControlName="coderate">
                    <option>--请选择--</option>
                    <ng-container>
                      <option *ngFor="let code of codeRate" [value]="code.value">{{code.name}}</option>
                    </ng-container>
                  </select></td>
                  <th>QAM类型:</th>
                  <td><select title="" class="form-control form-control-sm"
                              formControlName="modulation">
                    <option>--请选择--</option>
                    <ng-container>
                      <option *ngFor="let modulationItem of modulation" [value]="modulationItem.value">{{modulationItem.name}}
                      </option>
                    </ng-container>
                  </select></td>
                </tr>
                <tr>
                  <th>开启组播:</th>
                  <td><label><input type="checkbox" value="1" checked="checked" formControlName="multicast_ipv4"/>开启</label></td>
                  <th>组播端口:</th>
                  <td><input type="text" class="form-control form-control-sm" (change)="setDvbConfigChannelItemValue()" formControlName="common_port" id="common_port"></td>
                  <th>组播ttl值:</th>
                  <td><input type="text" class="form-control form-control-sm" formControlName="multicast_ttl" id="multicast_ttl"></td>
                </tr>
                <tr>
                  <th>组播输出网卡:</th>
                  <td><select title="" class="form-control form-control-sm"
                              formControlName="multicast_iface4">
                    <option>--请选择--</option>
                    <ng-container>
                      <option *ngFor="let network of multicastIface4" [value]="network.value">{{network.name}}</option>
                    </ng-container>
                  </select></td>

                </tr>
              </table>
            </div>
          </div>
          <div class="card">
            <div class="card-header font-weight-bold p-2">
              <span class="fa fa-fw fa-info-circle"></span>添加节目
            </div>
            <div class="card-body p-1">
              <form [formGroup]="dvbConfigChannelForm">
                <div >
                  <div class="col-10 float-left">
                    <table class="table table-hover table-striped table-sm">
                      <thead>
                      <tr>
                        <th><span>节目名称</span></th>
                        <th><span>IP</span></th>
                        <th><span>端口</span></th>
                        <th><span>服务ID</span></th>
                        <th><span>解扰</span></th>
                        <th><span></span></th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr>
                        <td><input type="text" class="form-control form-control-sm" formControlName="name" id="name"></td>
                        <td><input type="text" class="form-control form-control-sm"  formControlName="ip" id="ip"></td>
                        <td><input type="text" class="form-control form-control-sm"  formControlName="port" id="port"></td>
                        <td><input type="text" class="form-control form-control-sm" formControlName="service_id" id="service_id"></td>
                        <td><input type="checkbox" value="1" class="form-control form-control-sm" formControlName="oscam" id="oscam"></td>
                        <td><button class="btn btn-sm" (click)="addToConfigChannels()">添加</button></td>
                      </tr>
                      <tr *ngFor="let channel of addedChannels">
                        <td><span>{{channel.name}}</span></td>
                        <td><span>{{channel.ip}}</span></td>
                        <td><span>{{channel.port}}</span></td>
                        <td><span>{{channel.service_id}}</span></td>
                        <td><span>{{channel.oscam}}</span></td>
                        <td>
                          <div>
                            <span (click)="showChangeDvbConfigChannel(channel)" class="fa fa-fw fa-pencil-square"></span> <span (click)="deleteChannel(channel)" class="fa fa-fw fa-trash"></span></div>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="col-2 float-left">
                    <ng-container *ngFor="let channel of currentFreqFestval; let index=index">
                      <li class="nav-item list-group-item font-weight-bold font-75"
                          [ngClass]="{active: selectedChannel?.id === channel?.id}"
                          (click)="setChannelData(channel)">
                        {{ channel?.name }}
                      </li>
                    </ng-container>
                    <!--<table cellspacing="0" cellpadding="5">-->
                      <!--<tr (click)="setChannelData(channel)" *ngFor="let channel of currentFreqFestval">-->
                        <!--<th>{{channel.name}}</th>-->
                      <!--</tr>-->
                    <!--</table>-->
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="ml-1 mb-1 mt-1">
            <button class="btn btn-sm" (click)="advanceConfig()">高级配置</button>
          </div>
          <!--// 高级配置信息-->
          <div class="card" *ngIf="isAdvance">
            <div class="card-header font-weight-bold p-1">
              <span class="fa fa-fw fa-info-circle"></span>高级配置
            </div>
            <div class="card-body p-1">
              <table class="table-h" cellspacing="0" cellpadding="5">
                <tr>
                  <th>自动模式:</th>
                  <td>
                    <input type="text" class="form-control form-control-sm" formControlName="autoconfiguration" id="autoconfiguration">
                  </td>
                  <th>自动加入多播组:</th>
                  <td><label><input type="checkbox" value="1" checked="checked" formControlName="multicast_auto_join" id="multicast_auto_join"/>开启</label></td>
                  <th>单播绑定ip:</th>
                  <td>
                    <input type="text" (change)="setDvbConfigChannelItemValue()" class="form-control form-control-sm" formControlName="ip_http" id="ip_http">
                  </td>
                </tr>
                <tr>
                  <th>DVR缓冲区大小:</th>
                  <td><input type="text" class="form-control form-control-sm" formControlName="dvr_buffer_size" id="dvr_buffer_size"></td>
                  <th>检索数据包:</th>
                  <td><label><input type="checkbox" value="1" checked="checked" formControlName="dvr_thread" id="dvr_thread"/>开启</label></td>
                  <th>DVR_thread缓冲区大小:</th>
                  <td><input type="text" class="form-control form-control-sm" formControlName="dvr_thread_buffer_size" id="dvr_thread_buffer_size"></td>
                </tr>
                <tr>
                  <th>解扰:</th>
                  <td><label><input type="checkbox" value="1" checked="checked" formControlName="scam_support" id="scam_support"/>开启</label></td>
                  <th>缓冲区默认ts数据包数:</th>
                  <td><input type="text" class="form-control form-control-sm" formControlName="ring_buffer_default_size" id="ring_buffer_default_size"></td>
                  <th>默认解扰延迟时间:</th>
                  <td><input type="text" class="form-control form-control-sm" formControlName="decsa_default_delay" id="decsa_default_delay"></td>
                </tr>
                <tr>
                  <th>默认发送解扰延迟时间:</th>
                  <td><label><input type="checkbox" value="1" checked="checked" formControlName="send_default_delay" id="send_default_delay"/>开启</label></td>
                  <th>开启单播:</th>
                  <td><label><input type="checkbox" value="1" checked="checked" formControlName="unicast" id="unicast"/>开启</label></td>
                  <th>丢包策略:</th>
                  <td><select title="" class="form-control form-control-sm"
                              formControlName="psi_tables_filtering">
                    <option>--请选择--</option>
                    <ng-container>
                      <option *ngFor="let psiTableFilterItem of psiTableFilter" [value]="psiTableFilterItem.value">
                        {{psiTableFilterItem.name}}
                      </option>
                    </ng-container>
                  </select></td>
                </tr>
              </table>
            </div>
          </div>

          </form>
        <div class="ml-6 mr-6 mb-1 mt-3 col-12">
          <button *ngIf="isUpdateConfig" [disabled]="!dvbConfigForm.valid" class="btn btn-sm col-12" (click)="saveConfig()">保存配置</button>
        </div>
      </div>
    </div>
  </div>
</div>
<ng-tools-modal #modal></ng-tools-modal>
